<!-- Template 代码和 Vue 2 一样 -->
<template>

  <span >{{title}}</span>
  <el-button text circle type="" size="small" ref="buttonRef" style="vertical-align: top" @click.stop="onClickOutside">
    <el-icon size="13" :color="iconColor"><Filter /></el-icon>
  </el-button>
  <el-popover
          :width="(props.type === 'date' && radioValue === 'formTo')? 320:180"
          ref="popoverRef"
          :virtual-ref="buttonRef"
          trigger="click"
          virtual-triggering
          popper-class="d-popover"
  >
    <div @click.stop>
      <el-radio-group v-model="radioValue" class="d-radio-group" size="small">
        <template v-if="props.type === 'string'">
          <el-radio-button  v-for="it in stringList"  size="small" :key="it.code" :label="it.name" :value="it.code" class="d-radio-btn"/>
        </template>
        <template v-if="props.type === 'number'">
          <el-radio-button  v-for="it in numberList"  size="small" :key="it.code" :label="it.name" :value="it.code" class="d-radio-btn"/>
        </template>
        <template v-if="props.type === 'date'">
          <el-radio-button  v-for="it in dateList" size="small"  :key="it.code" :label="it.name" :value="it.code" class="d-radio-btn"/>
        </template>
      </el-radio-group>
      <template v-if="props.type === 'date'">
        <template v-if="radioValue === 'formTo'">
          <el-date-picker
                  v-model="startinputValue"
                  type="datetimerange"
                  start-placeholder="Start date"
                  end-placeholder="End date"
                  format="YYYY-MM-DD HH:mm:ss"
                  date-format="YYYY-MM-DD"
                  time-format="hh:mm:ss"
                  clearable="false"
                  :teleported="false"
          />
        </template>
        <template v-if="radioValue === 'eq'">
          <el-date-picker
                  v-model="endinputValue"
                  type="datetime"
                  placeholder="Pick a Date"
                  format="YYYY-MM-DD HH:mm:ss"
                  date-format="YYYY-MM-DD"
                  time-format="hh:mm:ss"
                  clearable="false"
                  :teleported="false"
          />
          <!--          :teleported="false" 作用 el-popover 嵌套 el-date-picker 时，当 el-date-picker 关闭 不会导致 el-popover 关闭 -->
        </template>
      </template>
      <template v-else>
        <el-input v-model="inputValue"  placeholder="请输入" class="d-input"/>
      </template>
      <div class="d-btn">
        <el-button size="small" @click="onRest">重置</el-button>
        <el-button type="primary" size="small" @click="onSubmit">确定</el-button>
      </div>
    </div>
  </el-popover>
</template>
<!-- Script 代码需要使用 Vue 3 的新写法-->
<script lang="ts" name="HeaderFilter">
  // Vue 3 的 API 需要导入才能使用
  import {defineComponent, ref, unref, watch} from 'vue'
  // import filter from "@element-plus/icons-vue";
  // 使用 `defineComponent` 包裹组件代码
  // 即可获得完善的 TypeScript 类型推导支持
  export default defineComponent({
    props: {
      field:{
        type: String
      },
      title:{
        type: String,
        default: '字段',
      },
      type: {
        type: String,
        default: 'string'
      }
    },
    emits: ['headerFilterSumit'],
    setup(props,{emit}) {
      const iconColor = ref('#000');
      let popoverWidth = ref(160);
      let radioValue = ref('like');
      const inputValue = ref('');
      const startinputValue = ref('');
      const endinputValue = ref('');
      const buttonRef = ref();
      const popoverRef = ref();
      if(props.type == 'number'){
        radioValue = ref('eq');
      }
      if(props.type == 'date'){
        radioValue = ref('today');
      }
      popoverWidth = ref(420);
      const stringList = ref([
        {name: '包含', code:'like'},
        {name: '不包含', code:'notlike'},
        {name: '等于', code:'eq'},
        {name: '不等于', code:'neq'},
        {name: '以…开始', code:'startwidth'},
        {name: '以…结束', code:'endwidth'},
        {name: '为空', code:'empty'},
        {name: '不为空', code:'notempty'},
      ]);
      const numberList = ref([
        {name: '等于', code:'eq'},
        {name: '不等于', code:'neq'},
        {name: '大于', code:'gt'},
        {name: '小于', code:'lt'},
        {name: '大于等于', code:'egt'},
        {name: '小于等于', code:'elt'},
      ]);

      const dateList = ref([
        {name: '今天', code:'today'},
        {name: '本周', code:'tswk'},
        {name: '本月', code:'tsMth'},
        {name: '上月', code:'lastMth'},
        {name: '过去一个月', code:'pastMth'},
        {name: '过去三个月', code:'pastThreeMth'},
        {name: '从…到…', code:'formTo'},
        {name: '等于', code:'eq'},
      ]);

      const onRest = () => {
        iconColor.value = '#000'
        popoverRef.value.hide();
      }
      const params = {"field":props.field, "type":"","keyword":"","starttime":"","endtime":""};
      let paramsRef = ref(params)
      const onSubmit = () => {
        iconColor.value = '#1882ef'
        paramsRef.value['type'] = radioValue.value
        paramsRef.value['starttime'] = ''
        paramsRef.value['endtime'] = ''
        paramsRef.value['keyword'] = ''
        if(props.type === 'date'){
          paramsRef.value['starttime'] = startinputValue.value
          paramsRef.value['endtime'] = endinputValue.value
        }else{
          paramsRef.value['keyword'] = inputValue.value

        }
        // console.log(paramsRef.value)
        emit('headerFilterSumit', unref(paramsRef))
        popoverRef.value.hide();

      }

      const onClickOutside = () => {
        unref(popoverRef).popperRef?.delayHide?.()
      }
      watch( () => radioValue.value, (val: string) => {
        paramsRef.value['type'] = val
        paramsRef.value['starttime'] = ''
        paramsRef.value['endtime'] = ''
        paramsRef.value['keyword'] = ''
        console.log(val)
        // emit('update:currentPage', val)
      })
      //watch(radioValue, (newValue, oldValue) => {
        // inputValue.value = '';
        // startinputValue.value=''
        // endinputValue.value=''
        // paramsRef = ref(params)
      //  console.log(`Message changed from "${oldValue}" to "${newValue}"`);
     // });
      // 将需要在 `<template />` 里使用的变量 `return` 出去
      return {
        iconColor,onClickOutside,buttonRef,radioValue,inputValue,startinputValue, endinputValue, stringList, numberList,dateList, popoverRef, onRest, onSubmit,props, popoverWidth
      }
    },
  })
</script>


<!-- CSS 代码和 Vue 2 一样 -->
<style lang="less">
  .d-popover {
    padding: 8px !important;
    .el-range-editor{
      .el-input__icon{
        display: none;
      }
    }
    .el-date-editor{
      .el-range-separator {
        flex: 0 !important;
      }
      .el-range-input {
        width: 47% !important;
      }
    }

    .el-date-editor--datetime{
      width:162px !important;
      .el-input__wrapper{
        padding: 1px 5px !important;
      }
      .el-input__prefix{
        display: none !important;
      }
    }
  }

  .d-radio-group {
    display: inline-flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    font-size: 0;
    flex-direction: column !important;
    width:100%;
    .d-radio-btn{
      display: block;
      width: 100%;
      label{
        width: 100% !important;
        text-align: left;
        span{
          width: 100% !important;
        }
      }
      .el-radio-button__inner{
        display: block  !important;
        width:100% !important;
        text-align: left !important;
        padding: 8px 6px !important;
        border: none !important;
      }
    }
  }
</style>
<style scoped>
  .d-input{
    margin-top:8px;
  }
  .d-btn{
    margin-top:8px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

</style>
